
<style>
    .num{position: absolute;left: 0;top: 0;border-radius: 50%;background-color: red;color: white;
        font-size: 14px;z-index: 1000000;width: 20px;height:20px;line-height: 20px;text-align: center;display: none;}
</style>
<!-- 头部 start -->
	<div class="header w1210 bc mt15">
		<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
		<div class="logo w1210">
			<h1 class="fl"><a href="<?php echo U('/')?>"><img src="__PUBLIC__/Home/images/logo.png" alt="京西商城"></a></h1>
			<!-- 头部搜索 start -->
			<div class="search fl">
				<div class="search_form">
					<div class="form_left fl"></div>
					<form action="" name="serarch" method="get" class="fl">
						<input type="text" class="txt" value="请输入商品关键字" /><input type="submit" class="btn" value="搜索" />
					</form>
					<div class="form_right fl"></div>
				</div>
				
				<div style="clear:both;"></div>

				<div class="hot_search">
					<strong>热门搜索:</strong>
					<a href="">D-Link无线路由</a>
					<a href="">休闲男鞋</a>
					<a href="">TCL空调</a>
					<a href="">耐克篮球鞋</a>
				</div>
			</div>
			<!-- 头部搜索 end -->

			<!-- 用户中心 start-->
			<div class="user fl">
				<dl>
					<dt>
						<em></em>
						<a href="">用户中心</a>
						<b></b>
					</dt>
					<dd>
						<div class="prompt">
							您好，请<a href="">登录</a>
						</div>
						<div class="uclist mt10">
							<ul class="list1 fl">
								<li><a href="">用户信息></a></li>
								<li><a href="">我的订单></a></li>
								<li><a href="">收货地址></a></li>
								<li><a href="">我的收藏></a></li>
							</ul>

							<ul class="fl">
								<li><a href="">我的留言></a></li>
								<li><a href="">我的红包></a></li>
								<li><a href="">我的评论></a></li>
								<li><a href="">资金管理></a></li>
							</ul>

						</div>
						<div style="clear:both;"></div>
						<div class="viewlist mt10">
							<h3>最近浏览的商品：</h3>
							<ul>
								<li><a href=""><img src="__PUBLIC__/Home/images/view_list1.jpg" alt="" /></a></li>
								<li><a href=""><img src="__PUBLIC__/Home/images/view_list2.jpg" alt="" /></a></li>
								<li><a href=""><img src="__PUBLIC__/Home/images/view_list3.jpg" alt="" /></a></li>
							</ul>
						</div>
					</dd>
				</dl>
			</div>
			<!-- 用户中心 end-->

			<!-- 购物车 start -->
			<div class="cart fl">
				<dl>
					<dt>
						<a href="/index.php/Home/Cart/lst">去购物车结算</a>
						<b></b>
					</dt>
					<dd>
						<div class="prompt" id="goodcar">
								<img src="__PUBLIC__/Home/images/loading.gif" />
						</div>
					</dd>
				</dl>
                            <div class="num" id="num">5</div>
			</div>
			<!-- 购物车 end -->
		</div>
		<!-- 头部上半部分 end -->
		
		<div style="clear:both;"></div>

		<!-- 导航条部分 start -->
		<div class="nav w1210 bc mt10">
			<!--  商品分类部分 start-->
			<div class="category fl <?php if($_show_nav == 0) echo 'cat1'; ?>">
				<div class="cat_hd <?php if($_show_nav == 0) echo 'off'; ?>">  <!-- 注意，首页在此div上只需要添加cat_hd类，非首页，默认收缩分类时添加上off类，并将cat_bd设置为不显示(加上类none即可)，鼠标滑过时展开菜单则将off类换成on类 -->
					<h2>全部商品分类</h2>
					<em></em>
				</div>
				
				<div class="cat_bd <?php if($_show_nav == 0) echo 'none'; ?>"> 
					<!-- 循环输出三层分类数据 -->
					<?php foreach ($cateData as $k => $v): ?>
					<div class="cat <?php if($k==0) echo 'item1'; ?>">
						<h3><a href=""><?php echo $v['catename'];?></a> <b></b></h3>
						<div class="cat_detail none">
							<?php foreach ($v['children'] as $k1 => $v1): ?>
							<dl  class="<?php if($k1==0) echo 'dl_1st'; ?>">
								<dt><a href=""><?php echo $v1['catename'];?></a></dt>
								<dd>
									<?php foreach ($v1['children'] as $k2 => $v2): ?>
									<a href=""><?php echo $v2['catename'];?></a>
									<?php endforeach; ?>					
								</dd>
							</dl>
							<?php endforeach; ?>
						</div>
					</div>
					<?php endforeach; ?>
				</div>

			</div>
			<!--  商品分类部分 end--> 

			<div class="navitems fl">
				<ul class="fl">
					<li class="current"><a href="">首页</a></li>
					<li><a href="">电脑频道</a></li>
					<li><a href="">家用电器</a></li>
					<li><a href="">品牌大全</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">积分商城</a></li>
					<li><a href="">夺宝奇兵</a></li>
				</ul>
				<div class="right_corner fl"></div>
			</div>
		</div>
		<!-- 导航条部分 end -->
	</div>
	<!-- 头部 end-->

	<div style="clear:both;"></div>
        
        <script>

            $(function(){
	//搜索框，注意此处，获取文本框的默认值使用defaultValue属性，但是只能通过this.defaultValue，不能使用$(this).defalutValue。
	$(".search_form .txt").focus(function(){
		if ($(this).val() == this.defaultValue){
			$(this).val("").css({color:"#333"});
		}	
	}).blur(function(){
		if ($(this).val() == ""){
			$(this).val(this.defaultValue).css({color:"#999"});
		}
	});
	//头部用户
	$(".user").mouseover(function(){
            
             
            
		$(this).find("dd").show();
		$(this).find("dt").addClass("on");
	}).mouseout(function(){
		$(this).find("dd").hide();
		$(this).find("dt").removeClass("on");
	});


       // 一开始获取购物车的里面的数量
       
           $.ajax({
	type : "GET",
	url : "/index.php/Home/Public/ajaxCarCount",
//	dataType : "json",
	success : function(data)
	{
               //商品数量
                 $("#num").html(data).show();
	}});

	//购物车
	$(".cart").hover(function(){
          
                     $.ajax({
	type : "GET",
	url : "/index.php/Home/Public/ajaxCarList",
	dataType : "json",
	success : function(data)
	{
                var count=data.length;
             if(count>0){
                   
            //这里购物车的信息我们最多显示 6条
              if(count>6){
                data=data.splice(0,6); //从第0个索引开始，取6个值
            }

              var html = "<table>";
          data.forEach(function(e,index){  
                  
                               html += "<tr>";
				html += '<td><img width="50" src="<?php echo $picView?>'+e.mid_logo+'" /></td>';
				html += '<td>'+e.goods_name+'</td>';
				html += '</tr>';
            });
        	html += "</table>";
        $("#goodcar").html(html);
             }else{
                 // 购物车没有商品的时候
                 $("#goodcar").html('购物车中还没有商品，赶紧选购吧！');
             }
          
	
	}});
            
		$(this).find("dd").show();
		$(this).find("dt").addClass("on");
	},function(){
		$(this).find("dd").hide();
		$(this).find("dt").removeClass("on");
	});

	//导航菜单效果
	$(".cat").hover(function(){
		$(this).find(".cat_detail").show();
		$(this).find("h3").addClass("on");
	},function(){
		$(this).find(".cat_detail").hide();
		$(this).find("h3").removeClass("on");
	});

	//非首页，导航菜单显隐效果
	$(".cat1").hover(function(){
		$(".cat1 .cat_hd").addClass("on").removeClass("off");
		$(".cat1 .cat_bd").show();
	},function(){
		$(".cat1 .cat_hd").addClass("off").removeClass("on");
		$(".cat1 .cat_bd").hide();
	});


});
            </script>